<template>
  <div class="my-order">
    <div class="order-box" v-if="this.orderData.length !== 0">
      <el-tabs class="order-list" stretch v-model="activeName">
        <el-tab-pane label="全部订单" name="first">
          <el-table :data="orderData" class="order-table" border center>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="product-form">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.product_name }}</span>
                  </el-form-item>
                  <el-form-item v-if="props.row.product_specs" label="商品规格">

                    <span v-if="JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                        1)).defaultware ">{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).SpecsSize
                      + ' | '
                      + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length - 1)).defaulteat
                      + ' | ' + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                        1)).defaultware }}</span>
                    <span v-else>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).data_weight }}</span>
                  </el-form-item>
                  <el-form-item label="商品类别">
                    <span>{{ props.row.product_sort }}</span>
                  </el-form-item>
                  <el-form-item label="商品单价">
                    <span>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).product_price }}</span>
                  </el-form-item>
                  <el-form-item label="购买数量">
                    <span>{{ props.row.pay_amount }}</span>
                  </el-form-item>
                  <el-form-item label=" 收 货 人">
                    <span>{{ props.row.user_name }}</span>
                  </el-form-item>
                  <el-form-item label=" 联系方式">
                    <span>{{ props.row.telephone }}</span>
                  </el-form-item>
                  <el-form-item label="收货地址">
                    <span>{{ props.row.user_address }}</span>
                  </el-form-item>
                  <el-form-item label="商品图片">
                    <el-image v-if="props.row.product_url1" style="width: 100px; height: 100px"
                      :src="props.row.product_url1" fit="fit" />
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="order_no" label="订单编号" align="center" width="180"></el-table-column>
            <el-table-column prop="product_no" label="商品编号" align="center" width="180"></el-table-column>
            <el-table-column prop="order_time" label="下单时间" align="center" width="200"></el-table-column>
            <el-table-column prop="pay_price" label="付款金额" align="center" width="150"></el-table-column>
            <el-table-column prop="pay_type" label="支付方式" align="center" width="120"></el-table-column>
            <el-table-column prop="order_state" align="center" label="订单状态" width="120"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" v-if="scope.row.order_state === '待付款'">商品付款</el-button>

                <el-button size="mini" v-if="scope.row.order_state === '已发货'">确认收货</el-button>

                <el-button size="mini" v-if="scope.row.order_state === '已拒绝'">联系客服</el-button>

                <el-button v-if="scope.row.order_state === '待付款'" size="mini" type="danger" slot="reference"
                  @click="cancelOrder(scope.row.orderId, scope.row.order_time)">取消订单</el-button>

                <el-button v-if="scope.row.order_state === '待处理'" disabled size="mini" type="danger"
                  slot="reference">等待处理</el-button>

                <el-button v-if="scope.row.order_state === '待收货'" size="mini" disabled type="warning"
                  slot="reference">退货中</el-button>

                <el-button size="mini" type="primary" v-if="scope.row.order_state === '已收货'"
                  @click="review(scope.row.order_no, scope.row.product_id, scope.row.product_name, scope.row.product_specs)">评价</el-button>
                <el-button v-if="scope.row.order_state === '已发货' || scope.row.order_state === '已收货'" size="mini"
                  type="danger" slot="reference">申请退货</el-button>

                <el-button v-if="scope.row.order_state === '待发货'" size="mini" type="primary"
                  slot="reference">申请退款</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待付款" name="second">
          <el-table :data="unpaidData" class="order-table" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="product-form">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.product_name }}</span>
                  </el-form-item>
                  <el-form-item v-if="props.row.product_specs" label="商品规格">
                    <span>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).SpecsSize
                      + ' | '
                      + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length - 1)).defaulteat
                      + ' | ' + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                        1)).defaultware }}</span>
                  </el-form-item>
                  <el-form-item label="商品类别">
                    <span>{{ props.row.product_sort }}</span>
                  </el-form-item>
                  <el-form-item label="商品单价">
                    <span>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).product_price }}</span>
                  </el-form-item>
                  <el-form-item label="购买数量">
                    <span>{{ props.row.pay_amount }}</span>
                  </el-form-item>
                  <el-form-item label=" 收 货 人">
                    <span>{{ props.row.user_name }}</span>
                  </el-form-item>
                  <el-form-item label=" 联系方式">
                    <span>{{ props.row.telephone }}</span>
                  </el-form-item>
                  <el-form-item label="收货地址">
                    <span>{{ props.row.user_address }}</span>
                  </el-form-item>
                  <el-form-item label="商品图片">
                    <el-image v-if="props.row.product_url1" style="width: 100px; height: 100px"
                      :src="props.row.product_url1" fit="fit" />
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="order_no" label="订单编号" align="center" width="180"></el-table-column>
            <el-table-column prop="product_no" label="商品编号" align="center" width="180"></el-table-column>
            <el-table-column prop="order_time" label="下单时间" align="center" width="200"></el-table-column>
            <el-table-column prop="pay_price" label="付款金额" align="center" width="150"></el-table-column>
            <el-table-column prop="pay_type" label="支付方式" align="center" width="120"></el-table-column>
            <el-table-column prop="order_state" align="center" label="订单状态" width="120"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" v-if="scope.row.order_state === '待付款'">商品付款</el-button>
                <el-button v-if="scope.row.order_state === '待付款'" size="mini" type="danger"
                  slot="reference">取消订单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="third">
          <el-table :data="unshippedData" class="order-table" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="product-form">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.product_name }}</span>
                  </el-form-item>
                  <el-form-item v-if="props.row.product_specs" label="商品规格">
                    <span v-if="JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                        1)).defaultware ">{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).SpecsSize
                      + ' | '
                      + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length - 1)).defaulteat
                      + ' | ' + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                        1)).defaultware }}</span>
                    <span v-else>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).data_weight }}</span>
                  </el-form-item>
                  <el-form-item label="商品类别">
                    <span>{{ props.row.product_sort }}</span>
                  </el-form-item>
                  <el-form-item label="商品单价">
                    <span>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).product_price }}</span>
                  </el-form-item>
                  <el-form-item label="购买数量">
                    <span>{{ props.row.pay_amount }}</span>
                  </el-form-item>
                  <el-form-item label=" 收 货 人">
                    <span>{{ props.row.user_name }}</span>
                  </el-form-item>
                  <el-form-item label=" 联系方式">
                    <span>{{ props.row.telephone }}</span>
                  </el-form-item>
                  <el-form-item label="收货地址">
                    <span>{{ props.row.user_address }}</span>
                  </el-form-item>
                  <el-form-item label="商品图片">
                    <el-image v-if="props.row.product_url1" style="width: 100px; height: 100px"
                      :src="props.row.product_url1" fit="fit" />
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="order_no" label="订单编号" align="center" width="180"></el-table-column>
            <el-table-column prop="product_no" label="商品编号" align="center" width="180"></el-table-column>
            <el-table-column prop="order_time" label="下单时间" align="center" width="200"></el-table-column>
            <el-table-column prop="pay_price" label="付款金额" align="center" width="150"></el-table-column>
            <el-table-column prop="pay_type" label="支付方式" align="center" width="120"></el-table-column>
            <el-table-column prop="order_state" align="center" label="订单状态" width="120"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button v-if="scope.row.order_state === '待收货'" size="mini" type="primary"
                  slot="reference">申请退款</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待收货" name="fourth">
          <el-table :data="unreceivedData" class="order-table" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="product-form">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.product_name }}</span>
                  </el-form-item>
                  <el-form-item v-if="props.row.product_specs" label="商品规格">
                    <span v-if="JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                        1)).defaultware ">{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).SpecsSize
                      + ' | '
                      + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length - 1)).defaulteat
                      + ' | ' + JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                        1)).defaultware }}</span>
                    <span v-else>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).data_weight }}</span>
                  </el-form-item>
                  <el-form-item label="商品类别">
                    <span>{{ props.row.product_sort }}</span>
                  </el-form-item>
                  <el-form-item label="商品单价">
                    <span>{{ JSON.parse(props.row.product_specs.substring(1, props.row.product_specs.length -
                      1)).product_price }}</span>
                  </el-form-item>
                  <el-form-item label="购买数量">
                    <span>{{ props.row.pay_amount }}</span>
                  </el-form-item>
                  <el-form-item label=" 收 货 人">
                    <span>{{ props.row.user_name }}</span>
                  </el-form-item>
                  <el-form-item label=" 联系方式">
                    <span>{{ props.row.telephone }}</span>
                  </el-form-item>
                  <el-form-item label="收货地址">
                    <span>{{ props.row.user_address }}</span>
                  </el-form-item>
                  <el-form-item label="商品图片">
                    <el-image v-if="props.row.product_url1" style="width: 100px; height: 100px"
                      :src="props.row.product_url1" fit="fit" />
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="order_no" label="订单编号" align="center" width="180"></el-table-column>
            <el-table-column prop="product_no" label="商品编号" align="center" width="180"></el-table-column>
            <el-table-column prop="order_time" label="下单时间" align="center" width="200"></el-table-column>
            <el-table-column prop="pay_price" label="付款金额" align="center" width="150"></el-table-column>
            <el-table-column prop="pay_type" label="支付方式" align="center" width="120"></el-table-column>
            <el-table-column prop="order_state" label="订单状态" align="center" width="120"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" v-if="scope.row.order_state === '已发货'">确认收货</el-button>
                <el-button v-if="scope.row.order_state === '已发货'" size="mini" type="danger"
                  slot="reference">申请退货</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else class="no-order" style="display: flex;">
      <img style="width:400px;height:388px; margin: 3% auto;"
        src="https://spring-oss.oss-cn-beijing.aliyuncs.com/images/img/noorder.png">
    </div>
    <!-- 商品评价 -->
    <el-dialog title="商品评价" class="review" :visible.sync="reviewFormVisible" width="500px">
      <el-form :model="reviewFrom" ref="reviewFroms">
        <el-form-item label="商品名称:" required>
          <el-input size="small" v-model="reviewFrom_name" readonly placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="口感评价:" required prop="star_level">
          <el-rate v-model="reviewFrom.star_level" :colors="colors" style="line-height: 2;">
          </el-rate>
        </el-form-item>
        <el-form-item label="配送评价:" required prop="delivery">
          <el-rate v-model="reviewFrom.delivery" :colors="colors" style="line-height: 2;">
          </el-rate>
        </el-form-item>
        <el-form-item label="包装评价:" required prop="package">
          <el-rate v-model="reviewFrom.package" :colors="colors" style="line-height: 2;">
          </el-rate> </el-form-item>
        <el-form-item label="商品评价:" prop="product_review">
          <el-input type="textarea" style="max-height: 120px" :rows="3" placeholder="从多个角度评价宝贝，可以帮助更多想买的人"
            v-model="reviewFrom.product_review"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="reviewFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitReview('reviewFroms')">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { showOrders, AddProductReview, showPageOrderGe } from '@/api/index'
export default {
  name: 'KodaiMyOrder',

  data () {
    return {
      activeName: 'first',
      orderData: [],
      unpaidData: [], //待支付订单
      unshippedData: [], //待发货订单
      unreceivedData: [],  //未收货订单,
      reviewFrom: {
        product_id: '',
        order_no: '',
        star_level: '',
        delivery: '',
        package: '',
        product_review: ''
      },
      reviewFrom_name: '',
      reviewFormVisible: false, //评价
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      total: 20,
      queryParams: {
        pageNum: 1,
        pageSize: 70
      },

    };
  },

  mounted () {
    showOrders().then(res => {
      this.total = res.data.data.length
      this.getList();
    })
  },

  methods: {
    // 分页组件函数
    async getList () {
      // 显示加载动画
      let loading = this.$loading({ lock: true, text: "加载中", background: "rgba(0, 0, 0, 0.7)" });
      try {
        var res = await showPageOrderGe(this.queryParams)
        if (res.data.code == 200) {
          res.data.data.forEach(item => {
            switch (item.order_state) {
              case '1':
                item.order_state = '待付款'
                this.unpaidData.push(item)
                break
              case '2':
                item.order_state = '待收货'
                this.unshippedData.push(item)
                break
              case '3':
                item.order_state = '已发货'
                this.unreceivedData.push(item)
                break
              case '4':
                item.order_state = '已收货'
                break
              case '5':
                item.order_state = '已拒绝'
                break
              default:
                item.order_state = '待处理'
                break
            }
          })
          this.orderData = res.data.data.reverse()
        }
      } catch (err) {
        // 显示注册失败的消息，并提示错误原因
        this.showMessage.call(this, 'error', '查询失败');
      }
      finally {
        // 关闭加载动画
        loading.close();
      }
    },
    review (o, p, n) {
      this.reviewFormVisible = true
      this.reviewFrom.order_no = o
      this.reviewFrom_name = n
      this.reviewFrom.product_id = p
    },
    submitReview (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          AddProductReview(this.reviewFrom).then(res => {
            if (res.data.code === 200) {
              this.reviewFormVisible = false
              this.showMessage.call(this, 'success', '评价成功!');
            } else {
              this.showMessage.call(this, 'err', '评价失败!');
            }
          })
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.my-order {
  margin: 0px auto;
  padding: 15px;
  min-height: 100%;
  user-select: none;
  background: #f5f5f5;
}

.my-order .order-box {
  width: 80%;
  min-width: 1325px;
  margin: 20px auto;
  border: 1px;
  min-height: 650px;
}

.my-order .order-list {
  background: #FFFFFF;
  min-height: 600px;
  margin: 10px 0 0;
}

.my-order .order-list .order-table {
  width: 95%;
  margin: 10px auto 20px;
  height: auto !important;
  min-height: 525px !important;
  user-select: text;
}

.my-order .product-form {
  font-size: 0;
  margin-left: 40px;

}

.my-order .el-form-item {
  margin-bottom: 0 !important;
}

.my-order .product-form label {
  width: 90px;
  color: #99a9bf;
}

.my-order .product-form .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 90%;
}

.my-order .product-form .el-form-item span {
  color: #AA8764;
}

::v-deep .el-input {
  width: 80% !important;

}

.my-order .product-form .el-form-item__label {
  padding: 0;
  width: 100px;
  /*width: auto;*/
}
</style>